import {createRouter, createWebHistory} from 'vue-router';
import {inject} from 'vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // 导航守卫
    {
      path: '/navigation-guard/:params',
      component: () => import('@/views/NavigationGuard.vue'),
      beforeEnter: [ // 路由组件改变时触发，params、query和hash的改变不算
        (to, from) => {
          console.log('④路由独享守卫beforeEnter');
        },
        // 更多路由独享守卫
      ]
    },
    {
      path: '/alias-avoid-reuse',
      component: () => import('@/views/AvoidReuse.vue')
    },
    
    // 导航故障
    {
      path: '/navigation-failure',
      component: () => import('@/views/NavigationFailure.vue'),
    }
  ]
});

// 全局前置守卫：路由URL改变时所有全局前置守卫按照创建顺序触发并异步解析执行，这意味着导航在所有全局前置守卫resolve前一直处于等待中，可用于鉴权
router.beforeEach((to, from, next) => {
  console.log('②全局前置守卫', inject('globalKey'));
  
  /**
   * 参数
   * to：即将进入的路由
   * from：正要离开的路由
   * [next]：守卫的所有逻辑中next只能被调用一次，否则守卫永远无法被解析或报错（已移除）
   */
  
  /**
   * 返回值
   * true/undefined：当前导航有效，并调用下一个导航守卫
   * false：取消导航
   * 路由地址或对象：中断当前导航重定向，形式如同router.push参数
   */
  
  /**
   * 异常：若遇到异常则抛出Error，调用router.onError()，并取消导航。router.onError()可自定义
   */
  next();
});

// 全局解析守卫：路由URL改变时触发，可用于获取数据或执行任何其他操作，例如用户无法进入页面时执行的操作
router.beforeResolve(to => {
  console.log('⑥全局解析守卫', inject('globalKey'));
});

// 全局后置守卫：无论路由组件改变还是路由URL改变总是被触发，不改变导航本身，可用于更改页面标题、声明页面等
router.afterEach((to, from, failure) => {
  // 参数failure：导航是否故障
  console.log('⑦全局后置守卫', inject('globalKey'));
});

export default router;
